<!-- <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box">
          <div slot="header" class="clearfix">
            <span>项目信息</span>
            <el-button style="float: right; padding: 3px 0; font-size: 12px" type="text">系统版本：{{ version }}</el-button>
          </div>

          <div style="line-height: 30px;">

            <div class="title" style="padding-top: 0px">系统介绍</div>
            在线考试系统是一款基于Node.js+Vue开发的考试系统。包含在线考试、用户体系、错题训练、考试规则、智能算分等考试功能，流程通畅。

            <div class="title">技术栈</div>
            <div class="tags">
              <el-tag>Node.js</el-tag>
              <el-tag>Express</el-tag>
              <el-tag>Vue</el-tag>
              <el-tag>MySQL</el-tag>
              <el-tag>JWT</el-tag>
              <el-tag>Element Plus</el-tag>
            </div>

            <div class="title">产品功能</div>
            <div>
              <div>系统完善：完善的前后端分离架构、规范的接口文档</div>
              <div>基础功能：系统配置、用户管理、部门管理、角色管理等。</div>
              <div>题库管理：支持单选题、多选题、判断题、支持试题批量导入导出</div>
              <div>考试权限：支持指定考试范围：完全公开、指定某些部门人员考试</div>
              <div>在线考试：学员在线考试、查看分数、考试错题训练。</div>
            </div>

          </div>

        </el-card>
      </el-col>
      <el-col :span="8">

        <el-card class="box">
          <div slot="header" class="clearfix">
            <span>支持信息</span>
          </div>

          <div>

            <div class="title" style="padding-top: 0px">商业咨询</div>
            <div style="display: flex;">
              <div style="flex-grow: 1;">
                <div>微信：gyh_yinzi（微信号）或搜索手机18603038204</div>
                <div>手机：<a href="tel:18603038204">18603038204（郭女士）</a></div>
                <div>邮箱：<a href="mailto:835487894@qq.com">835487894@qq.com</a> </div>
              </div>
              <div style="width: 120px; display: flex; align-items: center; flex-direction: column; align-content: flex-end">
                <img style="width: 100px; height: 100px" src="@/assets/contact.png" >
                <div style="font-size: 12px; text-align: center; width: 100%">微信扫码加我好友</div>
              </div>

            </div>

            <div class="title">支持网站</div>
            <div>
              <div>企业官网：<a href="https://www.yfhl.net" target="_blank">https://www.yfhl.net</a></div>
              <div>在线试用：<a href="https://exam.yfhl.net" target="_blank">https://exam.yfhl.net</a></div>
            </div>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template> -->

<!-- <script>
import { mapGetters } from 'vuex'
import config from '../../../package.json'

export default {
  name: 'Dashboard',
  data() {
    return {
      currentRole: 'adminDashboard',
      version: config.version
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'siteData'
    ])
  },
  created() {

  }
}
</script> -->

<!--
<style scoped>
.box{
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}
.title{
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span{
  margin-right: 10px;
}

.box a{
  color: #20a0ff;
}

.box a:hover{
  color: #ff0000;
}
</style> -->

<template>
  <div class="app-container">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409EFF;">
              <i class="el-icon-document" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ qu.total }}</div>
              <div class="stat-label">总题目数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col v-permission="['sa','student']" :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67C23A;">
              <i class="el-icon-s-claim" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ runningExams.length }}</div>
              <div class="stat-label">进行中考试</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #E6A23C;">
              <i class="el-icon-user" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ users.total }}</div>
              <div class="stat-label">注册用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col v-permission="['sa','student']" :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #F56C6C;">
              <i class="el-icon-s-data" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ recentExams.total }}</div>
              <div class="stat-label">考试记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 快速操作区域 -->
        <el-card class="box">
          <div slot="header" class="clearfix">
            <span>快速操作</span>
          </div>
          <el-row :gutter="20">
            <el-col v-permission="['sa','teacher']" :span="8">
              <div class="quick-action" @click="$router.push('/exam/qu')">
                <div class="action-icon" style="background-color: #409EFF;">
                  <i class="el-icon-edit" />
                </div>
                <div class="action-text">试题管理</div>
              </div>
            </el-col>
            <el-col v-permission="['sa','teacher']" :span="8">
              <div class="quick-action" @click="$router.push('/exam/exam')">
                <div class="action-icon" style="background-color: #67C23A;">
                  <i class="el-icon-s-claim" />
                </div>
                <div class="action-text">考试管理</div>
              </div>
            </el-col>
            <el-col v-permission="['sa', 'student']" :span="8">
              <div class="quick-action" @click="$router.push('/my/exam')">
                <div class="action-icon" style="background-color: #E6A23C;">
                  <i class="el-icon-reading" />
                </div>
                <div class="action-text">在线考试</div>
              </div>
            </el-col>
            <el-col v-permission="['sa', 'student']" :span="8">
              <div class="quick-action" @click="$router.push('/my/exam/records')">
                <div class="action-icon" style="background-color: #909399;">
                  <i class="el-icon-s-data" />
                </div>
                <div class="action-text">成绩查询</div>
              </div>
            </el-col>
            <el-col v-permission="['sa',,'teacher']" :span="8">
              <div class="quick-action" @click="$router.push('/exam/repo')">
                <div class="action-icon" style="background-color: #F56C6C;">
                  <i class="el-icon-folder" />
                </div>
                <div class="action-text">题库管理</div>
              </div>
            </el-col>
            <el-col v-permission="['sa']" :span="8">
              <div class="quick-action" @click="$router.push('/sys/user')">
                <div class="action-icon" style="background-color: #8E44AD;">
                  <i class="el-icon-user-solid" />
                </div>
                <div class="action-text">用户管理</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 最近考试记录 -->
        <data-table v-permission="['sa','student']" ref="pagingTable" :options="options" :list-query="listQuery">
          <template #data-columns>

            <el-table-column label="考试名称" prop="title" min-width="120" />

            <el-table-column prop="totalScore" label="分数" width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.user_score >= scope.row.qualify_score ? 'success' : 'danger'">
                  {{ scope.row.user_score }} / {{ scope.row.total_score }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="用时" min-width="250px" align="center">

              <template v-slot="scope">
                <span v-if="scope.row.limit_time">
                  {{ scope.row.create_time }} ~ {{ scope.row.update_time }}
                </span>
                <span v-else>不限时</span>
              </template>

            </el-table-column>

            <el-table-column label="操作" align="center" width="150px">
              <template v-slot="scope">
                <el-button type="warning" size="mini" icon="el-icon-user"
                  @click="viewExamDetail(scope.row)">考试详情</el-button>
              </template>
            </el-table-column>

          </template>

        </data-table>

        <el-dialog :visible.sync="dialogVisible" title="考试明细" width="60%">

          <div class="el-dialog-div">
            <my-paper-list :exam-id="examId" :user-id="userId" />
          </div>

        </el-dialog>

      </el-col>

      <el-col :span="8">
        <!-- 系统信息 -->
        <el-card class="box">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
            <el-button style="float: right; padding: 3px 0; font-size: 12px" type="text">
              版本：{{ version }}
            </el-button>
          </div>

          <div style="line-height: 30px;">
            <div class="title" style="padding-top: 0px">系统状态</div>
            <div class="system-status">
              <div class="status-item">
                <span class="status-label">服务器状态：</span>
                <el-tag type="success">正常运行</el-tag>
              </div>
              <div class="status-item">
                <span class="status-label">数据库连接：</span>
                <el-tag type="success">已连接</el-tag>
              </div>
              <div class="status-item">
                <span class="status-label">在线用户：</span>
                <el-tag>{{users.records.filter(item => item.state === 1).length}}人</el-tag>
              </div>
            </div>

            <div class="title">技术架构</div>
            <div class="tags">
              <el-tag>Node.js</el-tag>
              <el-tag>Express</el-tag>
              <el-tag>Vue</el-tag>
              <el-tag>MySQL</el-tag>
              <el-tag>JWT</el-tag>
              <el-tag>Element-UI</el-tag>
            </div>

            <button class="tags" @click="handleShare()"><el-tag>分享系统</el-tag></button>

            <div class="title">功能特性</div>
            <div class="feature-list">
              <div>✓ 多题型支持（单选/多选/判断）</div>
              <div>✓ 智能组卷与随机抽题</div>
              <div>✓ 自动评分系统</div>
              <div>✓ 错题本与强化训练</div>
              <div>✓ 多角色权限管理</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import config from '../../../package.json'
import { checkProcess } from '@/api/paper/exam'
import DataTable from '@/components/DataTable'
import MyPaperList from '../../views/user/exam/paper.vue'
import { post } from '@/utils/request'

export default {
  name: 'Dashboard',
  components: { DataTable, MyPaperList },
  data() {
    return {
      currentRole: 'adminDashboard',
      version: config.version,
      qu: [],
      runningExams: [],
      recentExams: [],
      users: [],

      listQuery: {
        current: 1,
        size: 10,
        params: {
          userId: this.$store.state.user.userId
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/exam/api/exam/exam/recentExam'
        // listUrl: 'http://hooercop.f1.luyouxia.net:11662/exam/api/exam/exam/recentExam'
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles',
      'siteData'
    ])
  },
  async created() {
    try {
      await this.getRunningExams()
      await this.getQu()
      await this.getUsers()
      await post(this.options.listUrl, this.listQuery).then(res => {
        this.recentExams = res.data
      })
    } catch (error) {
      console.error('获取考试记录列表失败', error)
    }
  },
  mounted() {
    post('/exam/api/user/heartbeat', { userId: this.$store.state.user.userId })
    // 每5分钟发送一次心跳包，更新用户状态
    setInterval(() => {
      post('/exam/api/user/heartbeat', { userId: this.$store.state.user.userId })
      this.getUsers()
    }, 300000)
  },

  methods: {
    // 分享系统
    async handleShare() {
      await post('/exam/api/monitor/online/list').then(res => {
        console.log('online', res)
      })
      // if (navigator.share) {
      //   console.log('分享系统', window.location.href)
      // } else {
      //   console.log('浏览器不支持分享系统')
      // }
    },

    viewExamDetail(exam) {
      this.$router.push(`/my/exam/result/${exam.id}`)
    },

    // 获取所有题目
    async getQu() {
      try {
        const res = await post('/exam/api/qu/qu/paging', {
          current: 1,
          size: 10
        })
        this.qu = res.data
        console.log('获取题目列表成功', this.qu)
      } catch (error) {
        console.error('获取题目列表失败', error)
      }
    },

    // 获取进行中的考试
    async getRunningExams() {
      const res = await checkProcess(this.$store.state.user.userId)
      this.runningExams = res.data ? [res.data] : []
    },

    // 获取注册用户
    async getUsers() {
      const res = await post('/exam/api/sys/user/paging', {
        current: 1,
        size: 10
      })
      this.users = res.data
    }
  }
}
</script>

<style scoped>
.box {
  height: auto;
  min-height: 300px;
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
  margin-bottom: 5px;
}

/* 统计卡片样式 */
.stat-card {
  margin-bottom: 0;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 28px;
  color: white;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

/* 快速操作样式 */
.quick-action {
  text-align: center;
  padding: 20px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.quick-action:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.action-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.action-icon i {
  font-size: 28px;
  color: white;
}

.action-text {
  font-size: 14px;
  color: #606266;
}

/* 系统状态样式 */
.system-status {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.status-label {
  color: #606266;
}

/* 功能列表样式 */
.feature-list div {
  padding: 5px 0;
  color: #67C23A;
}

.box a {
  color: #20a0ff;
}

.box a:hover {
  color: #ff0000;
}

.el-dialog-div {
  height: 60vh;
  overflow: auto;
  padding: 10px;
}
</style>
